import type { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
<template>
  <div v-if="type === 'config-mobile' || type === 'mobile'" style="flex: 1">
    <DatePicker v-model="input[0]" :label="config.title" :required="config.required" />
    <DatePicker v-model="input[1]" :label="config.title" :required="config.required" />
  </div>
  <div v-if="type === 'config-table' || type === 'table'" class="v-form-item-wrapper">
    <div class="form-item">
      <el-date-picker
        v-model="input"
        :type="pickerType"
        :value-format="formatStr"
        :format="formatStr"
        :start-placeholder="config.startPlaceholder"
        :end-placeholder="config.endPlaceholder"
        @change="onChange"
      />
      <div v-if="config.required" class="required">*</div>
    </div>
    <pre v-if="config.tips"><i class="icon iconfont">&#xe77e;</i>{{ config.tips }}</pre>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
const emits = defineEmits(['update'])
const props = defineProps<{
  id: string
  tdId: string
  formType: string
  formTypeName: string
  config: any

  type: string // form配置编辑 table表格表单 mobile移动端表单
  formValue: string
}>()
const pickerType = computed(() => {
  if (props.config.dateType === 0) {
    return 'daterange'
  }
  if (props.config.dateType === 1) {
    return 'datetimerange'
  }
  if (props.config.dateType === 3) {
    return 'monthrange'
  }
})
const formatStr = computed(() => {
  if (props.config.dateType === 0) {
    return 'YYYY-MM-DD'
  }
  if (props.config.dateType === 1) {
    return 'YYYY-MM-DD HH:mm'
  }
  if (props.config.dateType === 3) {
    return 'YYYY-MM'
  }
})
const input = ref<[string, string]>(['', ''])
const long = ref<number>(0)
const onChange = () => {
  const dateOne = dayjs(input.value[1])
  if (props.config.dateType === 3) {
    long.value = dateOne.diff(input.value[0], 'month', true)
  } else {
    long.value = dateOne.diff(input.value[0], 'day', true)
  }
  if (input.value.length) {
    emits('update', JSON.stringify([...input.value, long.value]))
  }
}
onMounted(() => {
  try {
    if (props.formValue) {
      const arr = JSON.parse(props.formValue)
      input.value = [arr[0], arr[1]]
      long.value = arr[2]
    }
  } catch (error) {
    console.log(error)
  }
})
</script>
